<template>
	<view>
		<next-tree :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly"
			:selectParent="selectParent" :ifSearch='ifSearch' :multiple="multiple" :treeData="treeData" @cancel="oncancel"
			@confirm="onconfirm">
		</next-tree>
	</view>
</template>

<script>
	let self = null;
	export default {
		props: {
			treeData: {
				type: Array,
				default: []
			},
			type:{
				type:[String,Number],
				default:''
			}
		},
		data() {
			return {
				multiple: false,
				selectParent: false,
				checkStrictly: false,
				activeId: '',
				ifSearch:false
			}
		},
		methods: {
			openTree: function() {
				this.$refs.nextTreeAsyncRef.showTree = true
			},
			changeVerify: function(current, chooseList) {
				// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
				// 如果函数体不做return返回值，即验证通过，控件正常处理业务
				console.log('当前变化的数据', current)
				console.log('已选择的数据', chooseList)
				console.log(this.type,"this.type")
				if(!this.multiple  && this.type != 4){
					this.$refs.nextTreeRef.showTree = false
			       this.$emit("comit", chooseList)
				}
				// if (chooseList && chooseList.length > 4) {
				// 	return '最多可以选择4个节点'
				// }
			},
			checkedFunc: function(id) {
				console.log(11111111111);
				if (this.activeId === id) {
					this.activeId = '';
					this.$refs.nextTreeRef.checkedFunc(id, false)
				} else {
					this.activeId = id;
					this.$refs.nextTreeRef.checkedFunc(id)
				}
			},
			loadData(nodeItem) {
				// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

				// if(nodeItem && this.localData[nodeItem.id]) {
				//  return this.localData[nodeItem.id]
				// } else {
				//  return []
				// }
				// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						if (nodeItem && self.localData[nodeItem.id]) {
							return resolve(self.localData[nodeItem.id])
						} else {
							return resolve([])
						}
					}, 1000)
				})
			},
			getTitle: function(checked) {
				return `已选：${checked.length}项`
			},
			echoDefault: function() {
				const selectIds = ['2-1', '3-3-35']
				this.checkedTreeData(this.treeData, selectIds)
				console.log('treeData的数据：', this.treeData)
				this.multiple = true
				this.$refs.nextTreeRef.showTree = true
			},
			itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
				this.multiple = _multiple
				this.ifSearch = _multiple
				this.selectParent = _selectParent
				this.checkStrictly = _checkStrictly
				 this.$refs.nextTreeRef.keywords = null
				this.$refs.nextTreeRef.showTree = true
			},
			itemclickTwo: function(_multiple,_ifSearch, _selectParent, _checkStrictly = false) {
				this.multiple = _multiple
				this.ifSearch = _ifSearch
				this.selectParent = _selectParent
				this.checkStrictly = _checkStrictly
				 this.$refs.nextTreeRef.keywords = null
				this.$refs.nextTreeRef.showTree = true
			},
			checkedTreeData: function(treeData, selectIds) {
				// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
				// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
				(treeData || []).map(item => {
					if (selectIds.indexOf(item.id) !== -1) {
						item.checked = true
					} else {
						item.checked = false
					}
					if (item.children && item.children.length) {
						this.checkedTreeData(item.children, selectIds)
					}
				})
			},
			onconfirm: function(list) {
				console.log('选中项的数量列表list：', list)
				this.$emit("comit", list)
			},
			oncancel: function() {
				// 清除treeData的选中状态
				this.checkedTreeData(this.treeData, [])
			}
		},
		created() {
			self = this
		}
	}
</script>
<style lang="scss" scoped>
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}
</style>